<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>题目详情</title>
    <style>
        * {
            box-sizing: border-box;
        }

        nav {
            background-color: #2196F3;
            overflow: hidden;
        }

        nav a {
            float: left;
            color: #FFFFFF;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 18px;
        }

        nav a:hover {
            background-color: #0B7DD1;
        }

        nav a.active {
            background-color: #0B7DD1;
        }

        .container {
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            margin-bottom: 20px;
            text-align: center;
        }

        .problem {
            width: 150%;
            max-width: 1500px;
            height: 1000px;
            padding: 20px;
            background-color: #f2f2f2;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .problem-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .problem-header h2 {
            margin: 0;
        }

        .problem-level {
            padding: 5px 10px;
            background-color: #2196F3;
            color: #FFFFFF;
            border-radius: 5px;
        }

        .problem-description {
            margin-bottom: 20px;
        }

        .problem-editor-wrapper {
    width: 100%;
    height: 60vh; /* 或者 70vh */
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #CCC;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.submit-button {
    padding: 10px 20px;
    background-color: #2196F3;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px; /* 或者 30px */
}

        .submit-button:hover {
            background-color: #0B7DD1;
        }

        /* 添加 ACE Editor 的样式 */
        .ace_editor {
            width: 100%;
            min-height: 500px;
            border-radius: 5px;
            height:100%;
            font-size: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        /* 添加新的 ACE Editor 主题 */
        .ace-monokaitheme .ace_gutter {
            background: #f2f2f2;
            color: #666;
            border-right: none;
        }
        .ace-monokaitheme {
            background-color: #f2f2f2;
            color: #282c34;
        }
    </style>
    <!-- 导入 ACE Editor 相关的 css 和 js 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/ace-builds/src-noconflict/ace.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ace-builds/src-noconflict/theme-monokai.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ace-builds/src-noconflict/theme-monokaitheme.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ace-builds/src-noconflict/mode-java.js"></script>
</head>
<body>
<nav>
    <a href="#">首页</a>
    <a href="#">题目列表</a>
    <a href="#">新增题目</a>
    <a href="#">个人中心</a>
</nav>
<div id="app">
    <div class="container">
        <h1>题目详情</h1>
        <div class="problem">
            <div class="problem-header">
                <h2>题目ID：{{ problemData.id }}</h2>
                <div class="problem-level">{{ problemData.level }}</div>
            </div>
            <h3>题目标题：{{ problemData.title }}</h3>
            <div class="problem-description">
                <p>{{ description }}</p>
            </div>
            <!-- 替换 CodeMirror 为 ACE Editor -->
            <div class="problem-editor-wrapper">
                <div id="ace-editor">{{ userCode }}</div>
            </div>
            <br>
            <button @click="submitCode" class="submit-button">提交代码</button>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>



    new Vue({
        el: '#app',
        data: {
            problemData: {},
            userCode: '',
            description: ''
        },
        mounted() {
            this.getProblemData();
        },
        methods: {
            getProblemData() {
                const self = this;
                // 从 URL 中获取要查询的具体问题的 id
                const urlParams = new URLSearchParams(window.location.search);
                const id = urlParams.get('id');

                fetch('http://localhost:8080/problem/' + id)
                    .then(response => response.json())
                    .then(data => {
                        self.problemData = data;
                        self.userCode = data.templateCode;
                        self.description = data.description;
                        // 在获取数据后初始化 ACE Editor
                        this.initializeEditor();
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            },
            initializeEditor() {
                const editor = ace.edit("ace-editor");
                editor.setTheme("ace/theme/monokaitheme"); // 设置 ACE Editor 新的主题
                editor.session.setMode("ace/mode/java");
                editor.session.setValue(this.userCode);
                editor.on('change', (event) => {
                    this.userCode = editor.getValue();
                });
            },
            submitCode() {
    // 发送 POST 请求到服务器上编译用户的代码
    fetch(`http://localhost:8080/compile/${this.problemData.id}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            id: this.problemData.id,
            code: this.userCode
        })
    })
    .then(response => response.json())
    .then(data => {
        // 处理服务器返回的数据
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

        }
    })
</script>

</body>
</html>
